<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <title>学术</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
		.h20 {height: 0.5rem;}

    body {
      background: #fff;
      margin-bottom: 50px;
    }
        #header_top {
            background: #2997e4;
            padding-top: 25px;
        }
    .detail_video_top .item_video {
      position: relative;
      padding: 0;
    }
    .detail_video_top .item_video .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: rgba(0, 0, 0, 0.1);
    }
    .detail_video_top .item_video .mask_mid {
      width: 2rem;
      width: 80px;
      height: 80px;
      padding: 20px;
      position: absolute;
      left:0;
      right:0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 50%;
      background: rgba(0,0,0,0.3);
      text-align: center;
    }
    .detail_video_top .item_video .mask_mid img {
      height: 100%;
      width: auto;
      margin-left: auto;
      margin-right: 0;
    }
    .detail_video_top .item_video .mask_bot {
      color: #fff;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 20px
    }
    .detail_video_top .item_video .mask_left {
      float: left;
      color: #fff;
      font-size: 14px;
    }
    .detail_video_top .item_video .mask_left img {
      width: 14px;
      display: inline-block;
      vertical-align: middle;
      margin-top: -5px;
      margin-right: 5px;
    }
    .detail_video_top .item_video .mask_right {
      float: right;
      color: #fff;
      font-size: 14px;
    }

    .videoTab .aui-tab-item {
      border: none;
      border-bottom: 1px solid #dcdcdc;
      position: relative;
    }
    .videoTab .aui-tab-item:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      height: 2px;
      background: #fff;
      margin: auto;
    }
    .videoTab .aui-tab-item.aui-active {
      color: #2997e4;
    }
    .videoTab .aui-tab-item.aui-active:after {
      background: #2997e4;
    }

    .videoContent {
      padding: 1rem;
    }
    .videoBox {
      display: none;
    }
    .jj_title {}
    .jj_title h3 {
      font-size: 0.9rem;
      color: #333;
      font-weight: bold;
    }
    .jj_pj {}
    .jj_star {
      display: inline-block;
      margin-right: 1rem;
    }
    .jj_star img {
      width: 0.8rem;
      display: inline-block;
    }
    .jj_person {
      display: inline-block;
      color: #ccc;
    }
    .jj_text {}
    .jj_text h4 {
      font-size: 0.75rem;
      color: #333;
    }
    .jj_text p {
      font-size: 0.6rem;
      color: #333;
      line-height: 1rem;
    }

    .ml_title {
      font-size: 0.9rem;
      color: #333;
      background: #f0f0f0;
      padding: 0.5rem 1rem;
      margin: 0 -1rem;
    }
    .ml_list {}
    .ml_list li {
      font-size: 0.75rem;
      color: #333;
      margin: 0.6rem 0;
    }
    .ml_btns::before,
    .ml_btns::after {
      content: '';
      display: block;
      height: 0;
      clear: both;
    }
    .ml_btns {
      position: fixed;
      bottom: 0;
      width: 100%;
      margin: 0 -1rem;
    }
    .ml_btn {
      background: #f0f0f0;
      float: left;
      width: 50%;
      padding: 0.5rem 0;
      text-align: center;
      color: #666;
    }
    .ml_btn img {
      width: 1rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: 0.25rem;
    }
    .ml_btn:nth-child(2) {
      background: #2997e4;
      color: #fff;
    }

    .pj {}

    .pj_star_outer {
      text-align: center;
    }
    .pj_star {
      display: inline-block;
    }
    .pj_star img {
      display: inline-block;
      width: 1rem;
    }
    .pj_top h5 {
      text-align: center;
      color: #999;
      font-size: 0.75rem;
    }
    .pj_bot .aui-media-list-item-inner {
      -webkit-box-align: start;
      box-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
    }
    .pj_bot .aui-list-item-title {
      font-size: 0.6rem;
      color: #999;
    }
    .pj_bot .aui-list-item-right {
      color: #ccc;
    }
    .pj_bot .aui-list-item-text {
      color: #666;
      font-size: 0.75rem;
    }
    .pj_bot .aui-list-item-text img {
      display: inline-block;
      width: 0.3rem;
    }
    .aui-dialog-header h3 {
      font-size: 0.75rem;
    }
    .aui-dialog-header .pj_star img {
      margin: 0.3rem;
    }
    .aui-dialog-body h6 {
      font-size: 0.5rem;
      color: #999;
      line-height: 0.8rem;
      margin: 0.4rem 0;
    }
  </style>
</head>
<body>
<header id="header_top" class="aui-bar aui-bar-nav" >

  <a class="aui-pull-left"  onclick="goback()">
      <span class="aui-iconfont aui-icon-left"></span>
  </a>
  <div class="aui-title" id="title">
  视频
</div>
    <!-- <a class="aui-pull-right" @click="openMore(id)">
        <span class="aui-iconfont aui-icon-more"></span>
    </a> -->
</header>
<div class="detail_video">
  <div class="detail_video_top">
    <div class="item_video">
      <img src="../../image/firstpage/t4@3x.png">
      <div class="mask">
        <div class="mask_mid">
          <img src="../../image/bf1@3x.png">
        </div>
        <div class="mask_bot">
          <div class="mask_left">
            <img src="../../image/bf2@3x.png">29.9万播放
          </div>
          <div class="mask_right">
            02:33
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="detail_video_bot">
    <div class="aui-tab videoTab" id="videoTab">
      <div class="aui-tab-item aui-active">简介</div>
      <div class="aui-tab-item">目录</div>
      <div class="aui-tab-item">评价</div>
    </div>
    <div class="videoContent">
      <div class="videoBox jj" style="display: block;">
        <div class="jj_title">
          <h3>生活处处是养生</h3>
        </div>
        <div class="jj_pj">
          <div class="jj_star">
            <img src="../../image/star1@3x.png" alt="">
            <img src="../../image/star1@3x.png" alt="">
            <img src="../../image/star3@3x.png" alt="">
            <img src="../../image/star2@3x.png" alt="">
            <img src="../../image/star2@3x.png" alt="">
          </div>
          <div class="jj_person">
            11789人在学
          </div>
        </div>
        <div class="h20"></div>
        <div class="jj_text">
          <h4>课程简介</h4>
          <p>“养生”，从古至今，都是一个永恒的话题。“养生”，涉及方方面面，饮食、起居、练形、养心。中国古代圣贤，早已提炼出科学而系统的养生学，大多简单、方便，有的是近乎失传的健康绝学，非常值得现代人借鉴学习。今天，王晨阳老师把这些养生秘诀完整地展现出来，我们会发现，人人需要养生，生活处处是养生。</p>
          <h4>适用人群</h4>
          <p>职场白领 养生人生</p>
        </div>
      </div>
      <div class="videoBox ml">
        <div class="ml_title">
          <h3>生活处处是养生</h3>
        </div>
        <div class="ml_list">
          <ul>
            <li>1.衡量健康人生的五大标准</li>
            <li>2.健康养生需要注意的八个角度</li>
            <li>3.健康养生的八字口诀</li>
            <li>4.健康三宝之便捷养精小方法</li>
            <li>5.健康睡眠有讲究</li>
          </ul>
        </div>
        <div class="ml_btns">
          <div class="ml_btn">
            <img src="../../image/shoucang@3x.png" alt="">收藏
          </div>
          <div class="ml_btn">
            <img src="../../image/jr@3x.png" alt="">加入学习
          </div>
        </div>
      </div>
      <div class="videoBox pj">
        <div class="pj_top">
          <div class="jj_title">
            <h3>我的评价</h3>
          </div>
          <div class="pj_star_outer">
            <div class="pj_star">
              <img src="../../image/star2@3x.png" alt="">
              <img src="../../image/star2@3x.png" alt="">
              <img src="../../image/star2@3x.png" alt="">
              <img src="../../image/star2@3x.png" alt="">
              <img src="../../image/star2@3x.png" alt="">
            </div>
          </div>
          <h5>您的保贵评价对我们非常重要哦~</h5>
        </div>
        <div class="h20"></div>
        <div class="pj_bot">
          <div class="aui-content">
            <ul class="aui-list aui-media-list">
              <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/share/share_to_icon_qq.png" class="aui-img-round aui-list-img-sm">
                  </div>
                  <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                      <div class="aui-list-item-title aui-font-size-14">晨晨</div>
                      <div class="aui-list-item-right">2分钟前</div>
                    </div>
                    <div class="aui-list-item-text">
                      评价
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star2@3x.png" alt="">
                    </div>
                    <div class="aui-list-item-text">课程设置挺丰富的！！！</div>
                  </div>
                </div>
              </li>
              <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/share/share_to_icon_qq.png" class="aui-img-round aui-list-img-sm">
                  </div>
                  <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                      <div class="aui-list-item-title aui-font-size-14">晨晨</div>
                      <div class="aui-list-item-right">2分钟前</div>
                    </div>
                    <div class="aui-list-item-text">
                      评价
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star2@3x.png" alt="">
                    </div>
                    <div class="aui-list-item-text">课程设置挺丰富的！！！</div>
                  </div>
                </div>
              </li>
              <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media" style="width: 3rem;">
                    <img src="../../image/share/share_to_icon_qq.png" class="aui-img-round aui-list-img-sm">
                  </div>
                  <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                      <div class="aui-list-item-title aui-font-size-14">晨晨</div>
                      <div class="aui-list-item-right">2分钟前</div>
                    </div>
                    <div class="aui-list-item-text">
                      评价
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star1@3x.png" alt="">
                      <img src="../../image/star2@3x.png" alt="">
                    </div>
                    <div class="aui-list-item-text">课程设置挺丰富的！！！</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="../../script/aui-tab.js"></script>
<script src="../../script/zepto.js"></script><script type="text/javascript" src="../../script/aui-dialog.js" ></script>
<script type="text/javascript">
  var dialog = new auiDialog({})
  function goback () {
    api.closeWin();
  }
  var tab = new auiTab({
    element:document.getElementById("videoTab"),
    index:1,
    repeatClick:false
  },function(ret){
    var xsBox = document.querySelectorAll('.videoBox')
    for (var i = 0; i < xsBox.length; i++) {
      xsBox[i].style.display = 'none'
    }
    document.querySelectorAll('.videoBox')[ret.index - 1].style.display =  'block'
  });
  $('.pj_star').on('click', function () {
    dialog.alert({
      title:'<div class="pj_star_outer"><div class="pj_star">' +
            '<img src="../../image/star1@3x.png" alt=""><img src="../../image/star1@3x.png" alt=""><img src="../../image/star1@3x.png" alt=""><img src="../../image/star1@3x.png" alt=""><img src="../../image/star1@3x.png" alt="">' +
            '</div></div><h3>推荐，课程非常棒</h3>',
      msg:'<h6>可以从课程难易程度,教学质量,视频质量,服务质量\n' +
      '几个维度进行评价哦~</h6><h6>200字内</h6>',
      buttons:['取消','确定']
    },function(ret){
      console.log(ret.buttonIndex) // 1 2
    })
  })
</script>
</body>
</html>
